<template>
    <div class="nav">
        <div class="icon">
            <span class="title">
                <img :src="user.isCollapse ? icon2 : icon1" alt="" />
            </span>
        </div>
        <el-scrollbar height="calc(100vh - 60px)">
            <el-menu
                active-text-color="#1757e2"
                class="el-menu-vertical-demo"
                :default-active="active"
                :default-openeds="openTab"
                ellipsis
                :collapse="user.isCollapse"
                :collapse-transition="false"
            >
                <template
                    v-for="(item, index) in sideRouter"
                    :key="item.menuId"
                >
                    <!-- 如果路由有二级路由 -->
                    <el-sub-menu
                        v-if="
                            item.children &&
                            item.children.length > 0 &&
                            item.visible === '0'
                        "
                        :index="item.path"
                    >
                        <template #title>
                            <svg-icon :name="item.icon" icon-size="14" />
                            <span>{{ item.title }}</span>
                        </template>
                        <template
                            v-for="(it, i) in item.children"
                            :key="i.toString()"
                        >
                            <!-- 一级下没有二级 -->
                            <el-menu-item
                                v-if="
                                    (!it.children || it.children.length == 0) &&
                                    it.visible === '0'
                                "
                                :index="it.path"
                                @click="href(it)"
                            >
                                <svg-icon :name="it.icon" icon-size="14" />
                                {{ it.title }}</el-menu-item
                            >
                            <!-- 一级下有二级 -->
                            <el-sub-menu
                                v-if="
                                    it.children &&
                                    it.children.length > 0 &&
                                    it.visible === '0'
                                "
                                :index="it.path"
                            >
                                <template #title>
                                    <svg-icon
                                        :name="it.icon"
                                        icon-size="14"
                                    />{{ it.title }}</template
                                >
                                <el-menu-item
                                    v-for="em in it.children"
                                    :key="em.path"
                                    :index="em.path"
                                    @click="href(em)"
                                >
                                    <svg-icon
                                        :name="em.icon"
                                        icon-size="14"
                                    />{{ em.title }}</el-menu-item
                                >
                            </el-sub-menu>
                        </template>
                    </el-sub-menu>
                    <!-- 没有二级路由 -->
                    <el-menu-item
                        v-if="
                            (!item.children || item.children.length === 0) &&
                            item.visible === '0'
                        "
                        :index="index.toString()"
                        @click="href(item)"
                    >
                        <svg-icon :name="item.icon" icon-size="14" />
                        <span>{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-scrollbar>
    </div>
</template>
<script lang="ts" setup>
import { routes } from '@/router';
import { useRouter, useRoute } from 'vue-router';
import { onBeforeMount, ref, watch, computed } from 'vue';
import { userStore } from '@/store/user';
import { usePeimissionStore } from '@/store/permission';
import icon1 from '@/assets/ats.png';
import icon2 from '@/assets/icon.png';
const peimission = usePeimissionStore();
const user = userStore();
const router = useRouter();
const route = useRoute();

const sideRouter: any = computed(() => peimission.routes);
const active = ref<string>('0');
const openTab = ref<string[]>([
    '/rewards/index',
    '/events/index',
    '/template/index',
    '/template/1/index',
    '/template/2/index',
    '/activitys/index',
    '/taskmanage/index',
    '/crowd/index',
]);

const href = (item: any) => {
    console.log('item', item.path);
    router.push(item.path);
};
onBeforeMount(() => {
    setnav(route.matched[route.matched.length - 1]);
});
watch(route, (newdate, olddata) => {
    const item = newdate.matched[newdate.matched.length - 1];
    if (item) {
        setnav(item);
    }
});
const setnav = (obj) => {
    active.value = obj.path;
};
</script>
<style lang="scss" scoped>
.nav {
    background-color: #fff;
    .icon {
        height: 60px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        color: var(--el-text-color-primary);
        border-bottom: 1px solid
            rgba($color: var(--el-text-color-primary), $alpha: 0.2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
            overflow: hidden;
            display: flex;
            align-items: center;
            //超出一行省略号
            // white-space: nowrap; //禁止换行
            // overflow: hidden;
            // text-overflow: ellipsis; //...
            img {
                max-height: 30px;
                margin-left: 14px;
            }
        }
    }
    .el-menu {
        border-right: none;
    }
    .el-menu--collapse {
        width: 100%;
    }
    .el-menu-item {
        padding: 0 20px;
    }
    :deep(.el-sub-menu__title) {
        padding: 0 20px;
    }
}
</style>
